<html>
    <head>
        <title>Cloud Optimized GeoTiff</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <style type="text/css">
            #description {
                z-index: 2;
                left: 10px;
            }
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="description">
            <div>Specify the URL of a COG to load:
                <input type="text" id="cog_url" />
                <button onclick="readCOGURL()">Load</button>
            </div>
            <button onclick="loadRGBSample()">Load RGB sample</button>
            <button onclick="load1BandSample()">Load 1 band sample</button>
        </div>
        <div id="viewerDiv"></div>
        <script src="js/GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="../dist/debug.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
        <script src="js/plugins/COGParser.js"></script>
        <script src="js/plugins/COGSource.js"></script>
        <script type="text/javascript">
            itowns.proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

            var viewerDiv = document.getElementById('viewerDiv');
            var view;

            function readCOGURL() {
                var url = document.getElementById('cog_url').value || new URLSearchParams(window.location.search).get('geotiff');

                if (url) {
                    loadCOG(url);
                    document.getElementById('cog_url').value = url;
                }
            }

            function loadRGBSample() {
                document.getElementById('cog_url').value = 'https://cdn.jsdelivr.net/gh/iTowns/iTowns2-sample-data/cog/nantes/nantes.tif';
                readCOGURL();
            }

            function load1BandSample() {
                document.getElementById('cog_url').value = 'https://oin-hotosm.s3.amazonaws.com/60fbca155a90f10006fd2fc3/0/60fbca155a90f10006fd2fc4.tif';
                readCOGURL();
            }

            function removeAllChildNodes(parent) {
                while (parent.firstChild) {
                    parent.removeChild(parent.firstChild);
                }
            }

            function loadCOG(url) {
                // create a source from a Cloud Optimized GeoTiff
                var cogSource = new COGSource({
                    url: url,
                    crs: "EPSG:2154",
                    // Default resample method is 'nearest', 'bilinear' looks better when zoomed
                    resampleMethod: 'bilinear'
                });

                cogSource.whenReady.then(() => {
                    if (view !== undefined) {
                        view.dispose(true);
                        removeAllChildNodes(viewerDiv);
                    }
                    view = new itowns.PlanarView(viewerDiv, cogSource.extent, {
                        // Default maxSubdivisionLevel is 5, so with huge geotiff it's not enough to see details when zoomed
                        maxSubdivisionLevel: 10,
                        disableSkirt: true,
                        placement: { tilt: 90 }
                    });
                    setupLoadingScreen(viewerDiv, view);
                    var cogLayer = new itowns.ColorLayer('cog', {
                        source: cogSource,
                    });
                    view.addLayer(cogLayer);
                });
            }

            readCOGURL();
        </script>
    </body>
</html>
